<template>
  <Header></Header>

  <main class="container min-h-[80vh] max-w-[1200px] mt-6 mx-auto p-4">

    <div class="grid grid-cols-10 gap-8">
      <!-- 左侧 -->
      <div class=" sm:col-span-7 col-span-10 rounded-2xl ">
        <!-- card -->
        <a @click="goWikiDetail(item.id, item.firstArticleId)" v-for="(item, index) in wikiList" :key="item.id"
          class="article-card opacity-95  block mx-6 mb-6 bg-white border border-gray-200 rounded-2xl overflow-hidden relative">
          <!-- 是否置顶 -->
          <div v-if="item.isTop"
            class="blog-font-cute cursor-default z-10 transition-all duration-300 article-isTop text-white text-center absolute text-2xl bg-[#7599b6b9] w-28 h-8 top-2 translate-x-[-33px] rotate-[-45deg]">
            置顶</div>
          <div :style="{ backgroundImage: `url(${item.cover})` }" v-loading="item.cover === ''"
            class="w-full h-[350px] pl-4 bg-cover bg-center  rounded-2xl transition-all duration-300 filter-grayscale">
          </div>

          <!-- 标题 -->
          <div
            class="article-title w-full h-[80px] pt-[2px] pl-4 absolute bottom-[-35px] bg-gray-400 bg-opacity-50 transition duration-300">
            <div class="blog-font-cute">

            </div>
            <span class="blog-font-cute text-2xl text-white">{{ item.title }}</span>
          </div>
          <!-- 摘要 -->
          <p
            class="article-summary px-4 w-full max-h-[20px] leading-5 absolute bottom-[-35px] text-[#f0f5f5a4] dark:text-yellow-400 truncate transition duration-300">
            {{ item.summary }}
          </p>
        </a>
        
      </div>

      <!-- 右侧 -->
      <aside class="col-span-3 hidden sm:block">
        <AuthorInfoCard></AuthorInfoCard>
        <TagCloudCard></TagCloudCard>
      </aside>
    </div>



  </main>

  <div class="hidden md:block sticky bottom-0 right-0 w-full">
    <div class="absolute right-0 bottom-0">
      <live2d></live2d>
    </div>
  </div>

  <indexFooter></indexFooter>
</template>

<script setup>
import Header from '@/composition/frontend/component/Header.vue';
import live2d from '@/components/live2d.vue';
import indexFooter from '@/composition/frontend/component/indexFooter.vue';
import AuthorInfoCard from '@/composition/frontend/component/AuthorInfoCard.vue';
import TagCloudCard from '@/composition/frontend/component/TagCloudCard.vue';
import { onMounted, ref } from 'vue';
import { getIndexWikiList } from '@/api/frontend/wiki';
import { showMessage } from '@/composables/utils';
import { useRouter } from 'vue-router';


//=========================Wiki数据=========================
const wikiList = ref([])
const initWikiData = () => {
  getIndexWikiList().then(res => {
    if (!res.success){
      showMessage(res.message, 'error')
      return
    }
    wikiList.value = res.data
  })
}
initWikiData()


//=========================文章详情跳转=========================
const router = useRouter()
const goWikiDetail = (wikiId, ArticleId) => {
  console.log(wikiId, ArticleId)
  router.push({
    path: '/wiki/' + wikiId,
    query: {ArticleId}
  })
}





</script>

<style scoped>
.article-card:hover .filter-grayscale {
    filter: blur(7px);
    scale: 1.05;
}

.article-card:hover .article-title {
    transform: translateY(-30px);
}


.article-summary {
    font-family: 'cute_Cat';
}

.article-card:hover .article-summary {
    transform: translateY(-45px);
}
</style>